<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
    <!-- debug switch -->
    <link rel="stylesheet" href="styles/debug.css">
    <link rel="stylesheet" href="styles/helpers.css">
    <link rel="stylesheet" href="styles/grid.css">
    <style>
        .hero {
            background: black url(images/hero-1.jpg) center/cover;
        }

        @media(max-width:1024px) {
            .hero {
                background: black url(images/hero-2.jpg) center/cover;
            }
        }

        @media(max-width: 768px) {
            .hero {
                background: black url(images/hero-2.jpg) center/cover;
            }
        }
    </style>
</head>

<body>

    <!-- .hero -->
    <section class="hero is-fullheight">
        <nav class="hero-header">
            <div class="columns is-marginless is-mobile heading has-text-weight-bold">
                <div class="column left">
                    <!-- <p class="navbar-item">TESLA</p> -->
                    <figure class="image">
                        <img src="images/tesla.svg" alt="" style="width: 6.25rem; height: 1rem;">
                    </figure>
                </div>
                <div class="column center desktop">
                    <p class="navbar-item has-text-black">MODEL S </p>
                    <p class="navbar-item has-text-black">MODEL X </p>
                    <p class="navbar-item has-text-black">MODEL 3 </p>
                    <p class="navbar-item has-text-white">ROADSTER</p>
                    <p class="navbar-item has-text-black">ENERGY </p>
                </div>
                <div class="column right">
                    <p class="navbar-item desktop has-text-black">SHOP </p>
                    <p class="navbar-item desktop has-text-black">SIGN IN </p>
                    <!-- <p class="navbar-item">HAMBURGER</p> -->
                    <figure class="navbar-item image has-text-black center">
                        <i class="fas fa-bars" style="width: 1rem; height: 1rem;"></i>
                    </figure>
                </div>
            </div>
        </nav>

        <header class="hero-body">
            <div class="is-overlay has-text-centered single-spaced" style="top:82px;">
                <h1 class="subtitle is-4">Tesla</h1>
                <h2 class="title is-1">Roadster</h2>
            </div>
        </header>

        <main class="hero-foot center" style="padding:2rem;">
            <div id="grid" style="width:768px;">
                <div id="a" class="center-column">
                    <p class="has-text-centered has-text-white">
                        ​The quickest car in the world, with record-setting<br>
                        acceleration, range and performance.
                    </p>
                </div>
                <div id="b" class="center-column">
                    <p class="title has-text-white">
                        <i class="fas fa-tachometer-alt has-text-grey-light" style="width: 0.75em; height: 0.75em;"></i>
                        1.9<span class="is-size-5">s</span>
                    </p>
                    <p class="subtitle has-text-white is-7">0-60 mph</p>
                </div>
                <div id="c" class="center-column" style="border-left: 1px solid gray;">
                    <p class="title has-text-white"><span class="is-size-5">+</span>250<span class="is-size-5">mph</span></p>
                    <p class="subtitle is-7 has-text-white">Top Speed</p>
                </div>
                <div id="d" class="center-column" style="border-left: 1px solid gray;">
                    <p class="title has-text-white">620</span><span class="is-size-5">mi</span></p>
                    <p class="subtitle is-7 has-text-white">Mile Range</p>
                </div>
                <div id="e" class="center-column">
                    <a class="button is-danger is-inverted is-rounded is-outlined has-text-weight-bold" style="width: 100%; border: 0.15em solid white;">
                        Reserve Now
                    </a>
                </div>
            </div>
        </main>
    </section>
    <!-- /.hero -->

</body>

</html>